<template>
  <div id="left_id">
      <ul>
          <li v-for="nav in nav_list" :key="nav.id">
            <router-link :to="nav.url"> {{ nav.name }}</router-link> 
          </li>
      </ul>    
  </div>
</template>

<script>
export default {
    methods: {
    },
    data(){
        return {
            nav_list: [
                {id: 1,name: "首页", url: "/index"},
                {id: 2,name: "食品管理", url: "/food"},
                {id: 3,name: "厨师管理", url: "/cookie"},
                {id: 4,name: "场地管理", url: "/place"},
                {id: 5,name: "工具管理", url: "/tool"},
                {id: 6,name: "垃圾管理", url: "/juck"}
            ]
        }
    } 
}
</script>

<style>
#left_id ul{
    margin-top: 40px;
}
#left_id li{
    text-align: center;
    line-height: 70px;
    font-size: 24px;
    color: aliceblue;
}
#left_id li:hover{
    background-color: white;
    color: #FF7F27;
}
</style>